<template>
	<view :class="['men_main',isAdjust?'show_row':'']">
		<view class="men_item" v-for="(item,index) in dataList" :key="index" @click="changeItem(index)">
			<view class="img">
				<image :src="item.headimgurl"></image>
			</view>
			<view class="cont">
				<view class="cont_top">
					<view class="name">{{item.real_name || item.nickname}}</view>
					<view class="top_r">
						<view class="level">{{item.grade_name}}</view>
						<view class="money">￥{{item.order_count || 0}}</view>
					</view>
				</view>
				<view class="phone">{{item.mobile || ''}}</view>
			</view>
			<view class="icon">
				<view class="iconfont iconfont-e775"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => {
					return []
				}
			},
			isAdjust: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {};
		},
		methods: {
			changeItem(index) {
				if (this.isAdjust) {
					this.$emit('toChange', {
						index: index
					})
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.men_main {
		padding-top: 20rpx;

		&.show_row {
			.men_item {
				&:active {
					background-color: #F5F5F5;
				}

				.money {
					display: none;
				}
			}

			.icon {
				display: block;
			}
		}

		.icon {
			display: none;
		}

		.men_item {
			display: flex;
			padding: 22rpx 28rpx;
			border-top: 2rpx solid #f5f5f5;
			align-items: center;

			.img {
				width: 92rpx;
				height: 92rpx;
				margin-right: 18rpx;
			}

			.cont {
				flex: 1;
				overflow: hidden;

				.cont_top {
					display: flex;
					align-items: center;

					.name {
						flex: 1;
						overflow: hidden;
						font-size: 30rpx;
						margin-right: 14rpx;
					}

					.top_r {
						display: flex;
						align-items: center;

						.level {
							font-size: 20rpx;
							line-height: 30rpx;
							padding: 0 16rpx;
							border-radius: 20rpx;
							background-color: #2F275C;
							color: #fff;
							margin-right: 10rpx;
						}

						.money {
							font-size: 20rpx;
							background-color: var(--color);
							color: #fff;
							line-height: 30rpx;
							border-radius: 20rpx;
							padding: 0 16rpx;
						}
					}
				}

				.phone {
					margin-top: 8rpx;
				}
			}
		}
	}
</style>
